import { Block, View } from '@tarojs/components'
import React, { useState, useEffect } from 'react';
import { useDidHide } from '@tarojs/taro';
import { calcTime } from '../../utils/tools'
import classnames from 'classnames';
import './count-down-seckill.scss'

const CountDownSeckill: React.FC<{isLimited?: boolean;time: number;inDjs?:any;isBGColor?: boolean;}> = (props) => {
    const [timeInfo, setTimeInfo] = useState({
        dur: 0,
        day: '00',
        hour: '00',
        minute: '00',
        second: '00',
        month: '00',
        year: '00',
    })
    let timer: any;
    useEffect(() => {
        let nowTime = new Date().getTime()
        if(props.time - nowTime < 1000 && props.inDjs){
          props.inDjs()
        }
        timer = setInterval(() => {
            const times = calcTime(props.time, nowTime)
            setTimeInfo(times)
            nowTime = nowTime + 1000
            if(props.time - nowTime < 1000 && props.inDjs){
              props.inDjs(false)
            }
        }, 1000)
        return () => {
            clearInterval(timer)
        }
    }, [props.time])
    useDidHide(() => {
        clearInterval(timer)
    })
    return (
        <View className="count-down-seckill">
            {
                Number(timeInfo.day) >= 1 && 
                <Block>
                    <View className={classnames('timer-item number', {
                        ['bg-white']: props.isBGColor
                    })}>{Number(timeInfo.day) > 999 ? 999 : timeInfo.day}</View>
                    <View className={classnames('timer-item text-new', {
                        ['semicolon-white']: props.whiteSemicolon
                    })}>天</View>
                </Block>
            }
            {/* 时 */}
            <View className={classnames('timer-item number', {
                ['bg-white']: props.isBGColor
            })}>{timeInfo.hour}</View>
            <View className={classnames('timer-item text-new', {
                ['semicolon-white']: props.whiteSemicolon
            })}>:</View>
            {/* 分 */}
            <View className={classnames('timer-item number', {
                ['bg-white']: props.isBGColor
            })}>{timeInfo.minute}</View>
            <View className={classnames('timer-item text-new', {
                ['semicolon-white']: props.whiteSemicolon
            })}>:</View>
            {/* 秒 */}
            <View className={classnames('timer-item number', {
                ['bg-white']: props.isBGColor
            })}>{timeInfo.second}</View>
        </View>
    )
}

export default CountDownSeckill
